<template>
  <div>
    <h2>element-ui测试页</h2>
    <el-form ref="form" :rules="rules" :model="form" label-width="80px">
      <el-form-item label="用户名" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
       <el-form-item label="手机号" prop="mobile">
        <el-input v-model="form.mobile"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input show-password v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 数据
      form: {
        name: '',
        password:'',
        mobile:''
      },
      // 校验规则
      rules:{
        mobile:[
          {
            required:true,message:'手机号不能为空哦!',trigger:'blur',

          },
          {pattern:/^[1](([3][0-9])|([4][0,1,4-9])|([5][0-3,5-9])|([6][2,5,6,7])|([7][0-8])|([8][0-9])|([9][0-3,5-9]))[0-9]{8}$/,message:'手机号的格式有误',trigger:'change'}
        ],
        name:[
          {
            required:true,message:'用户名不能为空哦!',trigger:'blur',
          },
          {
              min:3,max:6,message:'用户名的长度为 3 到 6 哦!',trigger:'change'
          }
        ]
      }
    }
  },
  methods: {
    // 提交
    onSubmit () {
      console.log('submit!')
    }
  }
}
</script>

<style></style>
